var obj_bkimgcontrolpanel = new BKImgControlPanel();

function BKImgControlPanel()
{
	var pMy = this;

	this.loadlibs_timeid;

	this.album_names;
	this.album_urls;
	this.album_img_names;

	this.userbkimg = '';
	this.orginalbkimg = '';
	
	this.ctrlPanel;
	this.PanelTabFrame;
	this.PanelTabPages;

	this.haslatestalumflag = false;
	this.showlatest_timeid;

	this.Init = function()
	{	
		pMy.LoadLibs();
		pMy.LibsReady();
	};

	this.LoadLibs = function()
	{
		if (typeof jQuery == 'undefined') 
		{
			// load jQuery
			var script = document.createElement('script');
			script.type = "text/javascript";
			script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
			document.getElementsByTagName('head')[0].appendChild(script);
		}

	};

	this.LibsReady = function()
	{
		pMy.loadlibs_timeid = setInterval(function()
			{
				if ( typeof jQuery == 'undefined' ) return;
				clearInterval(pMy.loadlibs_timeid);
				
				pMy.orginalbkimg = $('body').css('background-image');
				pMy.LoadSetting();
				pMy.SetBKImg();
				pMy.InitUI();

				if( pMy.haslatestalumflag) pMy.ShowLatest();
			},200);

	};

	this.InitUI = function()
	{
		pMy.CreateTabs();
		pMy.CreateSliders();
		pMy.CreateButtons();
	};

	this.CreateTabs = function()
	{
		if ( typeof jQuery == 'undefined'  ) return;
		
		$('body').append('<div class="bkimgcontrolpanel"></div>');
		pMy.ctrlPanel=$('body').children('.bkimgcontrolpanel');
		pMy.ctrlPanel.css( {top : '50%', left : '-500px' } );

		pMy.ctrlPanel.append('<div class="bkimg_tabframe" id="bkimg_tabframe_id"></div>');
		pMy.PanelTabFrame = pMy.ctrlPanel.children('#bkimg_tabframe_id');

		var tmp_ctabs = new bkimgcontroltabs();				 
		tmp_ctabs.addtabpages(pMy.album_names, 'bkimgslider');
		pMy.PanelTabPages = tmp_ctabs.get_tabpage();
	 
	};

	this.CreateButtons = function()
	{
		$('body').append('<div class="expandbutton">=&gt</div>');

		var otherbuttonhtmls = '';
		if( testbkimgalbum_name.length>0 && testbkimgalbum_link.length>0 )
		{
			otherbuttonhtmls = '<div class="bkimgcontrolpanel_otherbutton bkimg_clickbutton"><a href="' + testbkimgalbum_link + '">' + testbkimgalbum_name + '</a></div>';
		}

		pMy.ctrlPanel.append('<div class="clearfloat"></div><div class="closebutton bkimg_clickbutton">Close</div>' + otherbuttonhtmls + '<div class="bkimgcontrolpanel_otherbutton bkimg_clickbutton"><a href="">Add to your blog</a></div><div class="cancelbutton bkimg_clickbutton">Cancel</div><div class="clearfloat"></div>');

		pMy.ctrlPanel.children('.bkimg_clickbutton').mouseenter(function(){ $(this).css('background-color','#E4E4E4'); } );
		pMy.ctrlPanel.children('.bkimg_clickbutton').mouseleave(function(){ $(this).css('background-color','#EEEEEE'); } );

		pMy.ctrlPanel.children('.closebutton').click(function()
		{
			pMy.SaveSetting();
			pMy.ctrlPanel.animate({'left': '-450px'}); 
			$('.expandbutton').show(); 
		});


		pMy.ctrlPanel.children('.cancelbutton').click(function()
		{
			pMy.SetBKImg();
		});


		$('.expandbutton').mouseenter(function(){ $('.expandbutton').hide(); pMy.ctrlPanel.animate({'left': '0px'}); } );

	};

	this.CreateSliders = function()
	{
		for(ti=0; ti<pMy.album_names.length; ti++)
		{
			var imglists = pMy.album_img_names[ti].split('||');
			for (tj=0; tj<imglists.length; tj++)
			{
				imglists[tj] = 'http://' + pMy.album_urls[ti] + imglists[tj];
			}

			var tmp_sldier = new bkimgslider(pMy.PanelTabPages[ti].children('.bkimgslider'), imglists);
		}
	

	};

	this.LoadSetting = function()
	{
		//load cookie
		pMy.userbkimg = '';
		if (document.cookie.length>0)
		{
			c_start=document.cookie.indexOf('userbkimg=')
			if (c_start != -1)
			{ 
				c_start = c_start + 10; 
				c_end = document.cookie.indexOf(";",c_start);
				if (c_end == -1) c_end = document.cookie.length;
				pMy.userbkimg = unescape(document.cookie.substring(c_start,c_end));
			} 
		}

		//load album 
		if (bkimg_jsonvalue.length < 1) return;
		pMy.album_names = new Array(bkimg_jsonvalue.length);
		pMy.album_urls = new Array(bkimg_jsonvalue.length);
		pMy.album_img_names = new Array(bkimg_jsonvalue.length);

		for(ti=0; ti<bkimg_jsonvalue.length; ti++)
		{
			pMy.album_names[ti] = bkimg_jsonvalue[ti].albumname;
			pMy.album_urls[ti] = bkimg_jsonvalue[ti].albumurl ;
			pMy.album_img_names[ti] = bkimg_jsonvalue[ti].imgnames ;
			if (pMy.album_names[ti] == 'Latest Album') pMy.haslatestalumflag = true;
		}	
	};

	this.SetBKImg = function()
	{
		if ( pMy.userbkimg.length > 0 )
		{
			$('body').css('background-image',  pMy.userbkimg );
$('.cap-top').css('background-repeat', "repeat"); $('.cap-top').css('background-image', pMy.userbkimg ); 
		}
		else
		{
			$('body').css('background-image', pMy.orginalbkimg);
$('.cap-top').css('background-repeat', "repeat"); $('.cap-top').css('background-image', pMy.orginalbkimg); 
		}

	};

	this.SaveSetting = function()
	{
		//save to cookie
		pMy.userbkimg = $('body').css('background-image');

		var exdate = new Date();
		exdate.setDate(exdate.getDate()+3650);

		document.cookie = "userbkimg=" + escape(pMy.userbkimg) + ';';
				
	};

	this.ShowLatest = function()
	{
		$('body').append('<div class="bkimg_lastest"><div><p>Check out latest ones</p></div></div>');
		$('.bkimg_lastest').css('left','-1000px');
		
		$('.bkimg_lastest').append('<div class="bkimgcontrolpanel_otherbutton">Close</div><div class="bkimgcontrolpanel_otherbutton">OK</div><div class="clearfloat"></div>');

		var tmp_showlatest_close = $('.bkimg_lastest').children('.bkimgcontrolpanel_otherbutton').eq(0);
		var tmp_showlatest_ok = $('.bkimg_lastest').children('.bkimgcontrolpanel_otherbutton').eq(1);

		$('.bkimg_lastest').children('.bkimgcontrolpanel_otherbutton').mouseenter(function(){ $(this).css('background-color','#E4E4E4'); } );
		$('.bkimg_lastest').children('.bkimgcontrolpanel_otherbutton').mouseleave(function(){ $(this).css('background-color','#EEEEEE'); } );

		tmp_showlatest_ok.click(function()
		{ 
			$('.bkimg_lastest').hide();
			$('.expandbutton').trigger('mouseenter');	
		});

		tmp_showlatest_close.click(function()
		{ 
			$('.bkimg_lastest').hide();	
		});
				
		setTimeout(function()
		{
			if ( parseInt(pMy.ctrlPanel.css('left')) > -20 ) return;

			$('.bkimg_lastest').animate({'left': '0px'});
			setTimeout(function(){ $('.bkimg_lastest').animate({'left': '-1000px'});}, 5000);
		},3000);

	};

	///////////////////////////////////////////////////////////////////////////////////////////////////////////////////		
	pMy.Init();

}


function bkimgslider(dom_object, img_list)
{
	var pMy = this;

	this.div_slider_container;
	this.div_slider_window;

	this.div_slider_imgpanels = new Array(3);
	this.pre_panel_index = 0;
	this.cur_panel_index = 1;
	this.next_panel_index = 2;

	this.url_all_imgs_list = new Array();
	this.show_img_nums = 5;
	
	this.div_turn_left_button;
	this.div_turn_right_button;

	this.cur_img_start_index = 0;
	this.has_pre_flag = false;
	this.has_next_flag = false;

	this.has_prepared_flag = false;


	this.Init = function(dom_object, img_url_list)
	{
		pMy.div_slider_container = dom_object;
		pMy.div_slider_container.css("width", pMy.show_img_nums*60+90 + "px");
		pMy.div_slider_container.css("height", "60px");

		pMy.div_slider_container.append('<div class="bkimgslider_left_button">&lt</div>');

		pMy.div_slider_container.append('<div class="bkimgslider_window"></div>');
		pMy.div_slider_window = pMy.div_slider_container.children('.bkimgslider_window').eq(0);
		pMy.div_slider_window.css("width", pMy.show_img_nums*60+3 + "px");
		pMy.div_slider_window.css("height", "60px");

		pMy.div_slider_container.append('<div class="bkimgslider_right_button">&gt</div><div class="clearfloat"></div>');

		pMy.url_all_imgs_list = img_url_list.slice(0);

		var tmp_i = 0;
		for (tmp_i=0; tmp_i<3; tmp_i++)
		{
			pMy.div_slider_window.append('<div class="bkimgslider_imgpanel"></div>');
			pMy.div_slider_window.children('.bkimgslider_imgpanel').eq(tmp_i).css('top', -60*tmp_i + 'px');
			pMy.div_slider_imgpanels[tmp_i] = new bkimgslider_imgpanel(pMy.div_slider_window.children('.bkimgslider_imgpanel').eq(tmp_i), pMy.show_img_nums);
			
		}

		pMy.pre_panel_index = 0;
		pMy.cur_panel_index = 1;
		pMy.next_panel_index = 2;

		pMy.div_slider_imgpanels[pMy.pre_panel_index].setposition('pre');
		pMy.div_slider_imgpanels[pMy.cur_panel_index].setposition('cur');
		pMy.div_slider_imgpanels[pMy.next_panel_index].setposition('next');
	
		var tmp_curimgs = pMy.GetImgList('cur');
		var tmp_preimgs = pMy.GetImgList('pre');
		var tmp_nextimgs = pMy.GetImgList('next');

		pMy.has_pre_flag = false;
		if( img_url_list.length > pMy.show_img_nums )
		{
			pMy.has_next_flag = true;
		}
		else
		{
			pMy.has_next_flag = false;
		}

		pMy.div_slider_imgpanels[pMy.cur_panel_index].loadimg(tmp_curimgs);
		if (pMy.has_pre_flag)
		{
			pMy.div_slider_imgpanels[pMy.pre_panel_index].loadimg(tmp_preimgs);
		}
		if (pMy.has_next_flag)
		{
			pMy.div_slider_imgpanels[pMy.next_panel_index].loadimg(tmp_nextimgs);
		}

		pMy.div_slider_container.children(".bkimgslider_left_button").click( function(){ pMy.StartMove('pre'); } );
		pMy.div_slider_container.children(".bkimgslider_right_button").click( function(){ pMy.StartMove('next'); } );

		pMy.div_slider_container.children('.bkimgslider_left_button').mouseenter(function(){  $(this).css('background-color','#E4E4E4'); } );
		pMy.div_slider_container.children('.bkimgslider_left_button').mouseleave(function(){  $(this).css('background-color','#EEEEEE'); } );

		pMy.div_slider_container.children('.bkimgslider_right_button').mouseenter(function(){  $(this).css('background-color','#E4E4E4'); } );
		pMy.div_slider_container.children('.bkimgslider_right_button').mouseleave(function(){  $(this).css('background-color','#EEEEEE'); } );

		
	};

	this.GetImgList = function(imgflag)
	{
		var start_index = 0;
		switch(imgflag)
		{
		case "cur":
			start_index = pMy.cur_img_start_index;
			end_index = start_index + pMy.show_img_nums;
			end_index = (pMy.url_all_imgs_list.length < end_index ? pMy.url_all_imgs_list.length : end_index);
			break;
		case "pre":
			end_index = pMy.cur_img_start_index;
			if ( end_index <= 0 )
			{
				pMy.has_pre_flag = false;
				end_index = 0;
			}
			else
			{
				pMy.has_pre_flag = true;
			}
			start_index = end_index - pMy.show_img_nums;
			start_index = (start_index < 0 ? 0 : start_index);
			break;
		case "next":
			start_index = pMy.cur_img_start_index + pMy.show_img_nums;
			if ( start_index > pMy.url_all_imgs_list.length - 1 )
			{
				pMy.has_next_flag = false;
				start_index = pMy.url_all_imgs_list.length - 1;
			}
			else
			{
				pMy.has_next_flag = true;
			}
			end_index = start_index + pMy.show_img_nums;
			end_index = (pMy.url_all_imgs_list.length < end_index ? pMy.url_all_imgs_list.length : end_index);
			break;
		}
		
		var tmp_imglist = pMy.url_all_imgs_list.slice(start_index, end_index);
		return tmp_imglist;
	};

	this.StartMove = function(run_direction)
	{
		if ( "pre" == run_direction )
		{
			if ( !pMy.has_pre_flag ) return false;
			pMy.SlideToPre();
			pMy.PrepareForNext('pre');
		}
		else if( "next" == run_direction )
		{
			if ( !pMy.has_next_flag ) return false;
			pMy.SlideToNext();
			pMy.PrepareForNext('next');
		}
		
		return true;
	};

	this.PrepareForNext = function(turn_direction)
	{
		if( turn_direction == "pre")
		{
			pMy.pre_panel_index = (pMy.pre_panel_index + 3 - 1)%3;
			pMy.cur_panel_index = (pMy.cur_panel_index + 3 - 1)%3;
			pMy.next_panel_index = (pMy.next_panel_index + 3 - 1)%3;
			
			pMy.has_next_flag = true;
			var tmp_preimgs = pMy.GetImgList('pre');
			if (pMy.has_pre_flag)
			{
				pMy.div_slider_imgpanels[pMy.pre_panel_index].loadimg(tmp_preimgs);
				pMy.div_slider_imgpanels[pMy.pre_panel_index].setposition('pre');
			}
						
 
		}
		else if( turn_direction == "next" )
		{
			pMy.pre_panel_index = (pMy.pre_panel_index + 1)%3;
			pMy.cur_panel_index = (pMy.cur_panel_index + 1)%3;
			pMy.next_panel_index = (pMy.next_panel_index + 1)%3;

			pMy.has_pre_flag = true;
			var tmp_nextimgs = pMy.GetImgList('next');
			if (pMy.has_next_flag)
			{
				pMy.div_slider_imgpanels[pMy.next_panel_index].loadimg(tmp_nextimgs);
				pMy.div_slider_imgpanels[pMy.next_panel_index].setposition('next');
			}			

		}

	};

	this.SlideToPre = function()
	{
		if (!pMy.has_pre_flag) return;
	   
		pMy.cur_img_start_index = pMy.cur_img_start_index - pMy.show_img_nums;
		pMy.div_slider_imgpanels[pMy.cur_panel_index].slideleft('cur');
		pMy.div_slider_imgpanels[pMy.pre_panel_index].slideleft('pre');

	};

	this.SlideToNext = function()
	{
		if (!pMy.has_next_flag) return;

		pMy.cur_img_start_index = pMy.cur_img_start_index + pMy.show_img_nums;
		pMy.div_slider_imgpanels[pMy.cur_panel_index].slideright('cur');
		pMy.div_slider_imgpanels[pMy.next_panel_index].slideright('next');

	};

	///////////////////////////////////////////////////////////////////
	pMy.Init(dom_object, img_list);

}

function bkimgslider_imgpanel(dom_object, imgs_length)
{
	var pMy = this;

	this.div_imgpanel;
	this.div_imgbox_list;

	this.Init = function(dom_object, imglist_length)
	{
		pMy.div_imgpanel = dom_object;
		pMy.div_imgbox_list = new Array(imglist_length);

		pMy.div_imgpanel.css("width", imglist_length*60 + "px");
		pMy.div_imgpanel.css("height", "60px");

		for (i=0;i<imglist_length;i++ )
		{
			pMy.div_imgpanel.append('<div class="imgslider_imgbox"></div>');
			pMy.div_imgbox_list[i] = pMy.div_imgpanel.children('.imgslider_imgbox').eq(i);
			pMy.div_imgbox_list[i].append('<img src="" />');

			pMy.div_imgbox_list[i].children('img').eq(0).mouseenter(function(){ $(this).css('border', '1px solid #999999'); });
			pMy.div_imgbox_list[i].children('img').eq(0).mouseleave(function(){ $(this).css('border', 'none'); });
			pMy.div_imgbox_list[i].children('img').eq(0).click(function(){  $('body').css('background-repeat', "repeat"); $('body').css('background-image', 'url(' + this.src + ')' );  $('.cap-top').css('background-repeat', "repeat"); $('.cap-top').css('background-image', 'url(' + this.src + ')' ); });
		}

	};
	
	this.loadimg = function(imgurllist)
	{
		for (i=0;i<pMy.div_imgbox_list.length;i++ )
		{
			pMy.div_imgbox_list[i].css('visibility', 'hidden');
		}

		for(i=0;i<imgurllist.length;i++)
		{
			pMy.div_imgbox_list[i].children('img').attr('src', imgurllist[i]);
			pMy.div_imgbox_list[i].children('img').width(50);
			pMy.div_imgbox_list[i].children('img').height(50);
			pMy.div_imgbox_list[i].css('visibility', 'visible');
		}
	};
	
	this.setposition = function(pos_flag)
	{
		switch(pos_flag)
		{
		case "cur":
		   pos_x = 0;
		   break;
		case "pre":
		   pos_x = -1*pMy.div_imgpanel.width();
		   break;
		case "next":
		   pos_x = pMy.div_imgpanel.width();
		   break;
		}
		
		pMy.div_imgpanel.css( "left", pos_x + "px");
	};
	
	this.slideright = function(curposition)
	{
		switch (curposition)
		{
		case 'pre':
			goal_x =  -2 * pMy.div_imgpanel.width();
			break;
		case 'cur':
			goal_x = -1 * pMy.div_imgpanel.width();
			break;
		case 'next':
			goal_x = 0 * pMy.div_imgpanel.width();
			break;
		}

		pMy.div_imgpanel.animate( {left: goal_x+"px"} );
	};

	this.slideleft = function(curposition)
	{
		switch (curposition)
		{
		case 'pre':
			goal_x =  0 * pMy.div_imgpanel.width();
			break;
		case 'cur':
			goal_x = 1 * pMy.div_imgpanel.width();
			break;
		case 'next':
			goal_x = 2 * pMy.div_imgpanel.width();
			break;
		}

		pMy.div_imgpanel.animate( {left: goal_x + 'px'} );
	};
  
	////////////////////////////////////////////////////////////////////////////////////////////////////////

	pMy.Init(dom_object, imgs_length);
}

function bkimgcontroltabs()
{
	var pMy = this;

	this.div_bkimg_tabs;
	this.div_bkimg_labelframe;
	this.div_bkimg_labels;
	this.div_bkimg_tabpages;

	this.Init = function()
	{
		pMy.div_bkimg_tabs = $('#bkimg_tabframe_id');
		pMy.div_bkimg_tabs.append('<div class="bkimg_labelframe"></div>');
		pMy.div_bkimg_labelframe = pMy.div_bkimg_tabs.children('.bkimg_labelframe').eq(0);

	};

	this.addtabpages = function(label_list, tab_class)
	{
		pMy.div_bkimg_labels = new Array(label_list.length);
		pMy.div_bkimg_tabpages = new Array(label_list.length);
	
		pMy.div_bkimg_labelframe.append('<ul class="bkimg_label_ul"></ul><div class="clearfloat"></div>');
		for(ti=0; ti<label_list.length; ti++)
		{
			pMy.div_bkimg_labelframe.children('.bkimg_label_ul').append('<li class="bkimg_label">'+ label_list[ti] + '</li>');
			pMy.div_bkimg_labels[ti] =  pMy.div_bkimg_labelframe.children('.bkimg_label_ul').children('.bkimg_label').eq(ti);

			pMy.div_bkimg_tabs.append('<div class="bkimg_tabpage"><div class="' + tab_class + '"></div>');
			pMy.div_bkimg_tabpages[ti] = pMy.div_bkimg_tabs.children('.bkimg_tabpage').eq(ti);
		}

		pMy.div_bkimg_labelframe.children('.bkimg_label_ul').children('.bkimg_label').mouseenter(function()
		{
			if ($(this).css('border-bottom-color') == $(this).css('border-top-color'))
			{
				$(this).addClass('bkimg_label_hover');
			}
		});
		pMy.div_bkimg_labelframe.children('.bkimg_label_ul').children('.bkimg_label').mouseleave(function()
		{
				$(this).removeClass('bkimg_label_hover');

		});

		pMy.link_label_to_tabpage();
		pMy.div_bkimg_labels[0].trigger("click");
	};

	this.get_tabpage = function()
	{
		return pMy.div_bkimg_tabpages;
	};

	this.link_label_to_tabpage = function()
	{
		for(ti=0; ti<pMy.div_bkimg_labels.length; ti++)
		{
			pMy.div_bkimg_labels[ti].click(function()
			{			    
				pMy.div_bkimg_tabs.children('.bkimg_tabpage').hide();
				pMy.div_bkimg_tabpages[$(this).index()].show();
			   
				pMy.div_bkimg_labelframe.children('.bkimg_label_ul').children('.bkimg_label').css('border-bottom','1px solid #d3d3d3');
				$(this).css('border-bottom','1px solid #EEEEEE');
			});
		}

	};	

	///////////////////////////////////////////////////////////////////
	pMy.Init();

}